<template>
  <transition name="fade">
    <div class="content-box">
      <nav-title :title="this[$route.params.type]['title']"/>
      <!--<div class="nav">-->
      <!--<div class="cubeic-back"></div>-->
      <!--<h1 class="title">{{ this[$route.params.type]['title'] }}</h1>-->
      <!--<div class=""></div>-->
      <!--</div>-->
      <div class="line" v-for="item in this[$route.params.type]['list']">
        <span class="important" v-if="item.isMandatory">*</span>
        <div class="label">{{ item.label }}</div>
        <div class="value">
          <span v-if="item.isSelect && !item.controls">请选择</span>
          <input v-else type="text" placeholder="请在此输入" v-model="item.value">
        </div>
        <div class="controls-box">
          <div v-if="item.controls" class="controls">
            日历
          </div>
        </div>
        <div class="icon">
          <span v-if="item.isSelect">></span>
        </div>
      </div>
      <div class="submit-btn">
        保存
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'input-information',
    data() {
      return {
        theCompanyBefore: {
          title: '入公司前工作经历',
          list: [
            {
              isMandatory: true,
              label: '开始时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '结束时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '工作单位',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '职务',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '证明人及职务',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '联系电话',
              value: '',
              controls: false,
              isSelect: false
            }
          ]
        },
        education: {
          title: '教育经历',
          list: [
            {
              isMandatory: true,
              label: '开始时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '结束时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '学校名称',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '专业',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '学历',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '学位',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '是否统招',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '是否最高学历',
              value: '',
              controls: false,
              isSelect: false
            }
          ]
        },
        training: {
          title: '培训经历',
          list: [
            {
              isMandatory: true,
              label: '开始时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '结束时间',
              value: '',
              controls: true,
              isSelect: true
            },
            {
              isMandatory: true,
              label: '培训机构',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '培训内容',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '有无证书',
              value: '',
              controls: false,
              isSelect: true
            }
          ]
        },
        qualification: {
          title: '资格证书',
          list: [
            {
              isMandatory: true,
              label: '名称',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '等级',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '签发单位',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: true,
              label: '签发日期',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '有效期',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '存档状态',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: false,
              label: '借用人',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '归档时间',
              value: '',
              controls: true,
              isSelect: false
            }
          ]
        },
        language: {
          title: '语言能力',
          list: [
            {
              isMandatory: true,
              label: '语言',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: false,
              label: '证书名称',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '获得日期',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '考试分数',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '掌握程度',
              value: '',
              controls: false,
              isSelect: true
            }
          ]
        },
        computer: {
          title: '计算机能力',
          list: [
            {
              isMandatory: true,
              label: '技能名称',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: false,
              label: '证书名称',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '获得日期',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '考试分数',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '掌握程度',
              value: '',
              controls: false,
              isSelect: true
            }
          ]
        },
        rewardsAndPunishments: {
          title: '奖惩情况',
          list: [
            {
              isMandatory: true,
              label: '获得时间',
              value: '',
              controls: true,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '*奖惩类别',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: false,
              label: '*名称',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '授权机构',
              value: '',
              controls: false,
              isSelect: false
            }
          ]
        },
        family: {
          title: '家庭期情况',
          list: [
            {
              isMandatory: true,
              label: '姓名',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '性别',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: true,
              label: '关系',
              value: '',
              controls: false,
              isSelect: true
            },
            {
              isMandatory: false,
              label: '工作单位',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '职务',
              value: '',
              controls: false,
              isSelect: false
            },
            {
              isMandatory: false,
              label: '联系电话',
              value: '',
              controls: false,
              isSelect: false
            }
          ]
        }
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .content-box {
    padding: 0 10px;
    .important {
      color: red;
    }

    .line {
      display: flex;
      border-bottom: 1px solid #cccccc;
      line-height: 40px;
      .label {
        flex: 3;
        text-align: left;
        font-size: 14px;
      }
      .value {
        flex: 2;
        font-size: 13px;
        display: flex;
        justify-content: flex-start;
        color: #707070;
        input {
          width: 100%;
        }
      }
      .controls-box {
        flex: 3;
        text-align: left;
        .controls {
          display: inline;
        }
      }
      .icon {
        flex: 1;
        text-align: right;
      }
    }

    .submit-btn {
      position: absolute;
      bottom: 35px;
      background-color: #07BC4B;
      color: white;
      font-size: 16px;
      font-weight: 900;
      line-height: 32px;
      width: 206px;
      height: 32px;
      margin-left: -100px;
      left: 50%;
      box-shadow: 3px 3px 5px #888888;
    }

    .title {
      font-size: 20px;
      font-weight: 900;
      color: #25262d;
    }
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
